<template>
  <div class="s-box">
    <div class="loan-title">
      <p>每月还贷（元）</p>
      <p style="font-size: 20px">{{payAmount}}</p>
    </div>
    <!--<scroller lock-x @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="20"
              style="padding-bottom: .5rem;">-->
      <group class="main-content">
        <cell-box v-for="item in mySubscribeList" align-items="center"
                  @click.native="routerTo('loanPlan/'+item.loanPlanId)">
          <div style="width:100%;">
            <p>{{item.platformName}}</p>
            <p>还贷金额：{{item.amount}}</p>
            <p style="text-align: right">还贷日期：每月{{item.repayDay}}日</p>
          </div>
        </cell-box>
      </group>
      <!--<load-more :show-loading="loading" :tip="loading?'':'已全部加载'"></load-more>-->
    <!--</scroller>-->
    <div class="bottom-button" @click="goAddLoanPlan">
      添加还贷计划
    </div>
  </div>

</template>

<script>
  import Avatar from '@/components/Avatar'
  import {Scroller, Group, CellBox, LoadMore} from 'vux'

  export default {
    components: {
      Avatar,
      Scroller,
      Group,
      CellBox,
      LoadMore
    },
    data() {
      return {
        mySubscribeList: [],
        payAmount:0,
        onFetching: false,
        pageNum: 1,
        loading: true
      }
    },
    created() {
      this.qryLoanPlans();
    },
    mounted() {
      this.$nextTick(() => {
//        this.$refs.scrollerBottom.reset({top: 0})
      })
    },
    methods: {
      goAddLoanPlan() {
        this.$router.push('addLoanPlan');
      },
      onScrollBottom() {
        if (!this.onFetching) {
          this.onFetching = true;
          this.qryLoanPlans();
        }
      },
      qryLoanPlans() {
        this.$api.qryLoanPlans({
          pageSize: 50,
          pageNum: this.pageNum
        }).then((data) => {
          this.payAmount = data.payAmount;
          for (let item of data.mySubscribeList) {
            this.mySubscribeList.push(item);
          }
          if (data.totalPage > this.pageNum) {
            this.pageNum++;
            this.$nextTick().then(() => {
//              this.$refs.scrollerBottom.reset()
            });
            this.onFetching = false;
          } else {
            this.loading = false;
          }
        });

      }
    }
  }
</script>

<style lang="less" scoped>
  .main-content {
    p {
      font-size: .4rem;
    }
  }

  .s-box {
    background-color: #fff;
  }

  .loan-title {
    height: 2.4rem;
    padding-top: 20px;
    p {
      text-align: center;
    }
  }

  .bottom-button {
    position: fixed;
    width: 100%;
    height: 1.4rem;
    background-color: #2D8CF0;
    color: #fff;
    line-height: 1.4rem;
    font-size: .5rem;
    text-align: center;
    bottom: 0;
  }
</style>
